<template>
  <div>
    <div id="map"
         class="map">
    </div>
  </div>
</template>
<script>

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import { LineString, Point, Polygon } from 'ol/geom.js';
import { defaults as defaultInteractions } from 'ol/interaction.js';

import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js';
import { TileJSON, Vector as VectorSource } from 'ol/source.js';
import { Fill, Icon, Stroke, Style } from 'ol/style.js';//样式
import Drag from '../../api/map/Drag';
export default {
  data () {
    return {
      map: null
    }
  },
  methods: {

  },
  mounted () {
    var pointFeature = new Feature(new Point([0, 0]));

    var lineFeature = new Feature(
      new LineString([[-1e7, 1e6], [-1e6, 3e6]]));

    var polygonFeature = new Feature(
      new Polygon([[[-3e6, -1e6], [-3e6, 1e6],
      [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
    this.map = new Map({
      interactions: defaultInteractions().extend([new Drag()]),
      layers: [
        new TileLayer({
          source: new TileJSON({
            url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
          })
        }),
        new VectorLayer({
          source: new VectorSource({
            features: [pointFeature, lineFeature, polygonFeature]
          }),
          style: new Style({
            image: new Icon(/** @type {module:ol/style/Icon~Options} */({
              anchor: [0.5, 46],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              opacity: 0.95,
              src: 'data/icon.png'
            })),
            stroke: new Stroke({
              width: 3,
              color: [255, 0, 0, 1]
            }),
            fill: new Fill({
              color: [0, 0, 255, 0.6]
            })
          })
        })
      ],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
  }
}
</script>
<style lang="sass" scoped>
#map {height: 800px;}
</style>
